<template>
  <div class="">
    <img src="@/images/chuanbg.png" alt="" class="chuanbg" />
    <div class="chuanbox">
      <!-- 步骤提示组件 -->
      <right-tips :tipstext="tipstext" v-if="tipstext" class="tipszj" />
      <div class="rwt">
        <img src="@/images/rw1.png" alt="" v-if="eritem == 1" />
        <img src="@/images/rw2.png" alt="" v-if="eritem == 2 || eritem == 3" />
        <img
          src="@/images/rw3.png"
          alt=""
          v-if="eritem == 4 && !wpidac.includes(4)"
        />
        <img
          src="@/images/rw4.png"
          alt=""
          v-if="wpidac.includes(4) && eritem == 4"
        />
      </div>
      <div>
        <!-- 跳过 -->
        <div class="tool chuantg" @click="tganfn" v-if="!wpidac.includes(4)">
          <img src="@/images/gytg.png" alt="" class="normal" />
          <img src="@/images/gytga.png" alt="" class="active" />
        </div>
        <el-button
          class="chuantgs"
          @click="tganfn"
          type="primary"
          round
          v-if="wpidac.includes(4)"
          >完 成</el-button
        >
        <!-- 物品栏div -->
        <div class="wpldbox">
          <div class="wplbox">
            <div class="wplitem" @click="yxfn(1)">
              <img src="@/images/wp11.png" alt="" class="wpimg" ref="wp1" />
              <img
                src="@/images/ywc.png"
                alt=""
                class="ywc"
                v-if="wpidac.includes(1)"
              />
            </div>
            <div class="wplitem" @click="yxfn(2)">
              <img src="@/images/wp2.png" alt="" class="wpimg" ref="wp2" />
              <img
                src="@/images/ywc.png"
                alt=""
                class="ywc"
                v-if="wpidac.includes(2)"
              />
            </div>
          </div>
          <div class="wplbox">
            <div class="wplitem" @click="yxfn(3)">
              <img src="@/images/wp3.png" alt="" class="wpimg" ref="wp3" />
              <img
                src="@/images/ywc.png"
                alt=""
                class="ywc"
                v-if="wpidac.includes(3)"
              />
            </div>
            <div class="wplitem" @click="yxfn(4)">
              <img src="@/images/wp4.png" alt="" class="wpimg" ref="wp4" />
              <img
                src="@/images/ywc.png"
                alt=""
                class="ywc"
                v-if="wpidac.includes(4)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误提示 -->
    <error-tips :errortext="errortext" v-if="errortext != ''" />
    <!-- 清洗弹窗 -->
    <div class="zdbgbox" v-if="zdbgbox">
      <i class="el-icon-circle-close closed" @click="closefn"></i>
      <video
        class="zdbg"
        autoplay
        preload
        muted
        ref="videos"
        @ended="eritemfn(3)"
      >
        <source
          src="https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/shfx/qbxsf.mp4"
        />
      </video>
    </div>
  </div>
</template>

<script>
import ErrorTips from './errorTips.vue'
import RightTips from './rightTips.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    eritem: {
      default: 1,
      String
    }
  },
  components: { ErrorTips, RightTips },
  data() {
    //这里存放数据
    return {
      zdbgbox: false,
      wpid: 0,
      wpidac: [],
      errortext: '',
      tipstext: ''
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    errortext: {
      handler(i) {
        if (i) {
          const timer = setTimeout(() => {
            this.errortext = ''
            clearTimeout(timer)
          }, 1000)
        }
      },
      immediate: true,
      deep: true
    },
    eritem: {
      handler(i) {
        this.$nextTick(() => {
          this.$refs.wp1.classList.remove('tm')
          this.$refs.wp2.classList.remove('tm')
          this.$refs.wp3.classList.remove('tm')
          this.$refs.wp4.classList.remove('tm')
        })
        if (i == 1) {
          this.tipstext = '请点击更换工作服'
          this.wpid = 1
          this.$nextTick(() => {
            this.$refs.wp1.classList.add('tm')
          })
          this.removeItem(1)
        }
        if (i == 2) {
          this.tipstext = '请点击清洗双手'
          this.wpid = 2
          this.$nextTick(() => {
            this.$refs.wp2.classList.add('tm')
          })
          this.removeItem(2)
        }
        if (i == 3) {
          this.tipstext = '请点击佩戴口罩'
          this.wpid = 3
          this.$nextTick(() => {
            this.$refs.wp3.classList.add('tm')
          })
          this.removeItem(3)
        }
        if (i == 4) {
          this.tipstext = '请点击穿戴手套'
          this.wpid = 4
          this.$nextTick(() => {
            this.$refs.wp4.classList.add('tm')
          })
          this.removeItem(4)
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    removeItem(value) {
      this.wpidac = this.wpidac.filter((item) => item !== value)
    },
    yxfn(i) {
      if (i == this.wpid) {
        this.wpidac.push(i)
        if (this.eritem == 1) {
          this.$refs.wp1.classList.remove('tm')
          this.eritemfn(2)
        }
        if (this.eritem == 2) {
          //   this.eritemfn(2)
          this.zdbgbox = true
          this.$refs.wp2.classList.remove('tm')
        }
        if (this.eritem == 3) {
          this.eritemfn(4)
          this.$refs.wp3.classList.remove('tm')
        }
        if (this.eritem == 4) {
          this.$refs.wp4.classList.remove('tm')
          // this.tganfn()
          this.tipstext = '已穿戴完成，点击完成'
        }
      } else {
        this.errortext = '请点击选择正确的物品'
      }
    },
    tganfn() {
      this.$emit('tg')
    },
    closefn() {
      this.$refs.videos.pause()
      this.zdbgbox = false
      this.eritemfn(3)
    },
    eritemfn(i) {
      this.$emit('eritemfn', i)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.tipszj {
  position: relative;
  top: -95px !important;
  right: -220px !important;
}
.chuanbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chuantgs {
  position: absolute;
  right: 400px;
  bottom: 35px;
  width: 168px;
  height: 50px;
  font-size: 22px !important;
  border-radius: 50px !important;
}
.zdbg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.zdbgbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 971px;
  height: 655px;
  background: #053460;
  border-radius: 0px 0px 0px 0px;
  border: 5px solid;
  border-image: linear-gradient(
      180deg,
      rgba(0, 163, 255, 1),
      rgba(0, 107, 168, 1)
    )
    2 2;
}
.closed {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 30px;
  color: #918f8f;
  cursor: pointer;
  z-index: 8;
}
</style>
